<template>
  <div class="app-container">
    <div class="box mb20">
      <el-row>
        <el-col :span="24">
          <div class="grid-top">
            <img alt="cover" :src="matchData.bgImgUrl" class="cover" />
            <div v-if="matchData.type == '0'" class="info">
              <h3>
                <el-image  :src="matchData.logoUrl"/>
                {{ matchData.name }}
                <span class="typeTag blue" style="margin-left:10px">独立赛</span>
              </h3>
              <el-row>
                <el-col :span="13" style="max-width: calc(100% - 400px)">
                  <p class="status">
                    比赛时间：{{ matchData.beginTime?.substring(0, 10) }} 至
                    {{ matchData.endTime?.substring(0, 10) }}
                    <el-tag v-if="matchData.progressStatusCode == 3" type="warning"
                      >即将开始</el-tag
                    >
                    <el-tag v-if="matchData.progressStatusCode == 2" type="danger"
                      >报名中</el-tag
                    >
                    <el-tag v-if="matchData.progressStatusCode == 4">进行中</el-tag>
                    <el-tag v-if="matchData.progressStatusCode == 5" type="info"
                      >已结束</el-tag
                    >
                    <el-tag v-if="matchData.progressStatusCode == 1" type="info"
                      >报名未开始</el-tag
                    >
                  </p>
                  <p>赛事级别：{{ matchData.level }}</p>
                  <p v-if="matchData.address">地点：{{ matchData.address }}</p>
                  <p>报名截止时间：{{ matchData.signEndTime?.substring(0, 10) }}</p>
                  <p>主办单位：{{ matchData.ocOrganizer }}</p>
                  <div  v-if="matchData.sUrl">
                  <el-link
                    v-if="matchData.sUrl"
                    type="primary"
                    :href="matchData.sUrl[0]?.url"
                    target="_blank"
                  >
                    <!-- <el-icon :size="20">
                      <Download />
                    </el-icon> -->
                    《报名须知》 
                  </el-link>
                 
                  <el-link
                    v-if="matchData.dUrl"
                    type="primary"
                    :href="matchData.dUrl[0]?.url"
                    target="_blank"
                  >
                    <!-- <el-icon :size="20">
                      <Download />
                    </el-icon> -->
                    《免责声明》
                  </el-link>
                
                  <el-link
                    v-if="matchData.rUrl"
                    type="primary"
                    :href="matchData.rUrl[0]?.url"
                    target="_blank"
                  >
                    <!-- <el-icon :size="20">
                      <Download />
                    </el-icon> -->
                    《竞赛规程》
                  </el-link>
                </div>
                </el-col>
                <el-col :span="11" style="min-width: 380px">
                  <p class="countDownTitle"><span>报名截止倒计时</span></p>
                  <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒">
                    <template #default="timeData">
                      <span class="block">{{ timeData.days }}</span>
                      <span class="colon">天</span>
                      <span class="block">{{ timeData.hours }}</span>
                      <span class="colon">时</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">分</span>
                      <span class="block">{{ timeData.seconds }}</span>
                      <span class="colon">秒</span>
                    </template>
                  </van-count-down>
                  <div v-if="matchData.type == '0'" class="signButton">
                    <el-button
                      v-if="matchData.progressStatusCode == '1'"
                      type="info"
                      round
                      disabled
                      >报名未开始</el-button
                    >
                    <el-button
                      v-if="
                        matchData.progressStatusCode == '3' ||
                        matchData.progressStatusCode == '4' ||
                        matchData.progressStatusCode == '5'
                      "
                      type="info"
                      round
                      disabled
                      >报名已结束
                    </el-button>

                    <div v-if="matchData.progressStatusCode == '2'">
                      <el-button
                        v-if="matchData.signInfoStatus == '2'"
                        type="info"
                        round
                        @click="choseSignType(matchData)"
                      >
                        已报名
                      </el-button>
                      <el-button
                        v-else
                        type="success"
                        round
                        @click="choseSignType(matchData)"
                        >我要报名</el-button
                      >
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div v-if="matchData.type == '1'" class="info">
              <h3>
                <el-image :src="matchData.logoUrl"/>
                {{ matchData.name }}
                <span class="typeTag" style="margin-left:10px">联赛</span>
                <span class="typeTag green" style="margin: 0 10px">{{
                  matchData.level
                }}</span>
                <span v-show="matchData.progressStatusCodeStr" class="typeTag blue">
                  {{ matchData.progressStatusCodeStr }}
                </span>
              </h3>
              <p>
               
              </p>
              <p v-show="matchData.signBeginTime">
                报名时间：{{ matchData.signBeginTime?.substring(0, 10) }} 至{{
                  matchData.signEndTime?.substring(0, 10)
                }}
              </p>
              <p>
                比赛时间：{{ matchData.beginTime?.substring(0, 10) }} 至
                {{ matchData.endTime?.substring(0, 10) }}
              </p>
              <p>主办单位：{{ matchData.ocOrganizer }}</p>
              <p>联系方式：{{ matchData.contactTelno }}</p>
              <p>
                分站赛场次：<span style="color: #1ec886">{{
                  matchData.cpts.length
                }}</span>
                场
              </p>
          
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-tabs v-model="activeName" class="match-tabs leftTabs" @tab-click="handleClick">
            <el-tab-pane label="赛事详情" name="tab1">
              <div class="gg">
                <h3>组委会</h3>
                <div class="pp">
                  <div class="flexLine">
                    <label>主办单位：</label>
                    <div>
                      <p
                        v-for="s in matchData.ocOrganizer?.replace(/，/g, ',').split(',')"
                      >
                        {{ s }}
                      </p>
                    </div>
                  </div>
                  <div v-if="matchData.ocDeptName" class="flexLine">
                    <label>承办单位：</label>
                    <div>
                      <p
                        v-for="s in matchData.ocDeptName?.replace(/，/g, ',').split(',')"
                      >
                        {{ s }}
                      </p>
                    </div>
                  </div>
                  <div v-if="matchData.ocSupportor" class="flexLine">
                    <label>支持单位：</label>
                    <div>
                      <p
                        v-for="s in matchData.ocSupportor?.replace(/，/g, ',').split(',')"
                      >
                        {{ s }}
                      </p>
                    </div>
                  </div>
                  <div v-if="matchData.ocToDeptName" class="flexLine">
                    <label>协办单位：</label>
                    <div>
                      <p
                        v-for="s in matchData.ocToDeptName
                          ?.replace(/，/g, ',')
                          .split(',')"
                      >
                        {{ s }}
                      </p>
                    </div>
                  </div>
                  <div v-if="matchData.operatingUnit" class="flexLine">
                    <label>运营单位：</label>
                    <div>
                      <p
                        v-for="s in matchData.operatingUnit
                          ?.replace(/，/g, ',')
                          .split(',')"
                      >
                        {{ s }}
                      </p>
                    </div>
                  </div>
                  <p v-if="matchData.ocTelno">联系电话：{{ matchData.ocTelno }}</p>
                </div>
              </div>
              <div class="gg">
                <h3>报名须知</h3>
                <div class="pp" v-if="matchData.signKnow">
                  <p v-html="matchData.signKnow" />
                </div>
               
              </div>
              <div v-if="matchData.type == '0'" class="gg">
              <h3>竞赛项目</h3>
                <el-collapse class="pp" v-model="collapseActive">
                  <el-collapse-item
                    v-for="(p, index) in matchData.cptProjectList"
                    :title="p.name"
                    :name="index"
                  >
                    <el-row v-if="p.hasNext == 1">
                      <!-- <table class="table" cellpadding="0" cellspacing="0">
                        <tbody v-for="g in p.cptGroupList" :key="g.id">
                          <tr>
                            <th v-if="g.femaleLevelList?.length" rowspan="2">
                              {{ g.name }}
                            </th>
                            <th v-else>{{ g.name }}</th>
                            <td v-if="g.commonList?.length > 0">
                              <span v-for="(l, index) in g.commonList" :key="index">{{
                                l.name
                              }}</span>
                            </td>
                            <td v-if="g.maleLevelList?.length > 0">男子组</td>
                            <td v-if="g.maleLevelList?.length > 0">
                              <span v-for="(l, index) in g.maleLevelList" :key="index">{{
                                l.name
                              }}</span>
                            </td>
                          </tr>
                          <tr v-if="g.femaleLevelList?.length > 0">
                            <td>女子组</td>
                            <td>
                              <span
                                v-for="(l, index) in g.femaleLevelList"
                                :key="index"
                                >{{ l.name }}</span
                              >
                            </td>
                          </tr>
                        </tbody>
                      </table> -->

                      <div class="table">
                         <div v-for="g in p.cptGroupList" :key="g.id" class="duckBox">
                           <p v-if="g.femaleLevelList?.length" rowspan="2" :class="g.maleLevelList?.length > 0||g.femaleLevelList?.length > 0?'duckTitle':'duckTitle marginTop'" >
                              {{ g.name +'('+g.birthPeriod+')'}}
                            </p>
                            <p v-else :class="g.maleLevelList?.length > 0||g.femaleLevelList?.length > 0?'duckTitle':'duckTitle marginTop'" >{{ g.name+'('+g.birthPeriod+')' }}</p>
                            <p v-if="g.commonList?.length > 0" class="duckTitle marginTop">
                              <span v-for="(l, index) in g.commonList" :key="index">{{
                                l.name
                              }}</span>
                            </p>
                            <div v-if="g.maleLevelList?.length > 0||g.femaleLevelList?.length > 0" class="duckGroup marginBottom">
                              <div v-if="g.maleLevelList?.length > 0" class="duckGroup-list">
                                <el-icon :color="variables.primaryColor"><CaretRight /></el-icon>
                              <span class="duckGroup-list-title">男子组</span>
                              <p >
                              <span class="mr15" v-for="(l, index) in g.maleLevelList" :key="index">{{
                                l.name
                              }}</span>
                            </p>
                            </div >
                          
                            <div v-if="g.femaleLevelList?.length > 0" class="duckGroup-list">
                              <el-icon :color="variables.primaryColor"><CaretRight /></el-icon>
                            <span class="duckGroup-list-title">女子组</span>
                            <p>
                              <span class="mr15"
                                v-for="(l, index) in g.femaleLevelList"
                                :key="index"
                                >{{ l.name }} </span
                              >
                            </p>
                           </div>
                            </div>
                    
                         
                         </div>
                      </div>
                      <el-col v-for="g in p.cptGroupList" :key="g.id" hidden>
                        <dl class="plist">
                          <dt>{{ g.name }}</dt>
                          <dd v-for="(l, index) in g.commonList" :key="index">
                            {{ l.name }}
                          </dd>
                          <dd v-if="g.maleLevelList?.length > 0" class="t">男子组</dd>
                          <dd v-for="(l, index) in g.maleLevelList" :key="index">
                            {{ l.name }}
                          </dd>
                          <dd v-if="g.femaleLevelList?.length > 0" class="t">女子组</dd>
                          <dd v-for="(l, index) in g.femaleLevelList" :key="index">
                            {{ l.name }}
                          </dd>
                        </dl>
                      </el-col>
                    </el-row>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-tab-pane>

            <el-tab-pane label="日程" name="second">
              <div class="mt20" />
              <el-timeline>
                <el-timeline-item
                  v-for="s in matchData.cptScheduleList"
                  :key="s.id"
                  hide-timestamp
                  placement="top"
                >
                  <p style="font-size: 16px; margin: 0">
                    {{ s.timeRange?.split(",")[0].substring(0, 16) }}
                    ~
                    {{ s.timeRange?.split(",")[1].substring(0, 16) }}
                  </p>

                  <p style="font-size: 16px">{{ s.name }}</p>
                  <p v-if="s.introduction" v-html="s.introduction"></p>
                  <div class="time-address">
                    <el-icon>
                      <Position />
                    </el-icon>
                    {{ s.address }}
                  </div>
                </el-timeline-item>
              </el-timeline>

              <el-empty
                v-if="matchData.cptScheduleList?.length == 0"
                description="还没有日程"
              />
            </el-tab-pane>
            <el-tab-pane
              v-if="matchData.showJoinGroup == '1'"
              :label="secondTabName"
              name="third"
            >
              <div v-if="matchData.type == '0'">
                <el-row :gutter="20" v-if="matchData.signType == '0'">
                  <el-col v-for="t in signDoneGroupList" :key="t.id" :span="8">
                    <div class="teamItem">
                      <el-avatar :size="60" :src="t.imgUrl || t.avatar" />
                      <span class="name">{{ t.name }}</span>
                    </div>
                  </el-col>
                </el-row>
                <!-- <el-row :gutter="20" v-else>
                  <el-col :span="24" v-for="(t, index) in signDoneGroupList" :key="t.id">
                    <div class="nowteamItem">
                      <span>{{ index + 1 }}.</span>
                      <el-avatar :size="80" :src="t.imgUrl || t.avatar" :fit="cover" />
                      <div class="info">
                        <h3 class="name">{{ t.name }}</h3>
                        <p v-if="t.extraInfo">
                          <span
                            v-for="(ee, index) in JSON.parse(t.extraInfo)"
                            :key="index"
                            v-show="(ee?.type == '0' || ee?.type == '4') && index < 2"
                          >
                            {{ ee.value }}&ensp;&ensp;
                          </span>
                        </p>
                      </div>
                      <p class="rr">
                        <span>{{ t.renCi }}</span> 人参赛
                      </p>
                    </div>   
                  </el-col>
                </el-row> -->
                <div v-else >
                  <el-table v-show="signDoneGroupList.length>0" :data="signDoneGroupList" style="width: 100%" border >
                  <el-table-column label="序号" type="index" width="60" align="center"/>
                      <el-table-column prop="imgUrl" label="logo" width="120" align="center">
                        <template #default="scope">
                          <el-avatar :size="80" :src="scope.row.imgUrl || scope.row.avatar" :fit="cover" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="队伍名称" align="center"/>
                      <el-table-column prop="renCi" label="参赛人数" width="100" align="center"/>
                      <el-table-column  label="企业性质" align="center">
                        <template #default="scope">
                          <span  
                          v-if="JSON.parse(scope.row.extraInfo)[1]"       
                          >
                            {{ JSON.parse(scope.row.extraInfo)[1].value }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column  label="所在地" width="100" align="center">
                        <template #default="scope">
                          <span
                          v-if="JSON.parse(scope.row.extraInfo)[0]"
                          >
                          {{ JSON.parse(scope.row.extraInfo)[0].value }}
                          </span>
                        </template>
                      </el-table-column>
                    </el-table>
                </div>
              
                <el-empty
                  v-if="signDoneGroupList == null || signDoneGroupList.length == 0"
                  description="暂无数据"
                />
              </div>
              <div v-else>
                <div />
                <el-row :gutter="30" class="pt-20">
                  <el-col v-for="n in matchData.cpts" :key="n.id" :span="24">
                    <div class="matchItem" @click="goDetail(n.id)">
                      <el-avatar alt="logo" :size="100" :src="n.logoUrl" />
                      <div class="info">
                        <h3>{{ n.name }}</h3>
                        <p>
                          报名截止：{{ n.signEndTime?.substring(0, 10) }}
                          <el-tag v-if="n.progressStatusCode == 3" type="warning"
                            >即将开始</el-tag
                          >
                          <el-tag v-if="n.progressStatusCode == 2" type="danger"
                            >报名中</el-tag
                          >
                          <el-tag v-if="n.progressStatusCode == 4">进行中</el-tag>
                          <el-tag v-if="n.progressStatusCode == 5" type="info"
                            >已结束</el-tag
                          >
                          <el-tag v-if="n.progressStatusCode == 1" type="info"
                            >报名未开始</el-tag
                          >
                        </p>
                        <p>
                          比赛时间：{{ n.beginTime?.substring(0, 10) }}-{{
                            n.endTime?.substring(0, 10)
                          }}
                        </p>
                        <p>比赛地点：{{ n.address }}</p>
                      </div>
                      <div class="pobtns">
                        <el-button
                          v-if="n.progressStatusCode == 2"
                          round
                          type="success"
                          @click="goDetail(n.id)"
                        >
                          我要报名
                        </el-button>
                        <el-button
                          v-else-if="n.progressStatusCode == 5"
                          round
                          type="info"
                          @click="goDetail(n.id)"
                        >
                          报名结束
                        </el-button>
                        <el-button v-else round type="warning" @click="goDetail(n.id)"
                          >查看详情</el-button
                        >
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-empty v-if="!matchData.cpts" description="暂无数据" />
              </div>
            </el-tab-pane>

            <el-tab-pane
              v-if="cptLabelsList.length > 0"
              :label="cptLabelsList[0].customTitle"
              name="cptLabelsList[0].id"
            >
              <div class="richContent" v-html="cptLabelsList[0].customText" />
              <div>
                <el-link
                  v-if="cptLabelsList[0].fileObj"
                  type="primary"
                  :href="cptLabelsList[0].fileObj.url"
                  target="_blank"
                >
                  <el-icon :size="20">
                    <Download />
                  </el-icon>
                  {{ cptLabelsList[0].fileObj.name }}
                </el-link>
              </div>
            </el-tab-pane>
            <el-tab-pane
              v-if="cptLabelsList.length > 1"
              :label="cptLabelsList[1].customTitle"
              name="cptLabelsList[1].id"
            >
              <div class="richContent" v-html="cptLabelsList[1].customText" />
              <div>
                <el-link
                  v-if="cptLabelsList[1].fileObj"
                  type="primary"
                  :href="cptLabelsList[1].fileObj.url"
                  target="_blank"
                >
                  <el-icon :size="20">
                    <Download />
                  </el-icon>
                  {{ cptLabelsList[1].fileObj.name }}
                </el-link>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="6">
          <el-tabs v-model="activeName2" class="match-tabs" @tab-click="handleClick">
            <el-tab-pane label="报名时间" name="first">
              <div class="gg">
                <p v-show="matchData.signBeginTime">
                  报名时间：{{ matchData.signBeginTime?.substring(0, 10) }} 至
                  {{ matchData.signEndTime?.substring(0, 10) }}
                </p>
                <p v-show="matchData.beginTime">
                  比赛时间：{{ matchData.beginTime?.substring(0, 10) }} 至
                  {{ matchData.endTime?.substring(0, 10) }}
                </p>
                <p>联系方式：{{ matchData.contactTelno }}</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="popupGroupList" title="请选择参赛队" width="600px">
      <div class="popList">
        <div
          v-for="(t, index) in groups"
          :key="index"
          class="teamItem"
          @click="getThisGroupId(t)"
        >
          <el-avatar :size="60" :src="t.imgUrl" />
          <span class="name">{{ t.name }}({{ t.abreviations }})</span>
          （{{ t.typeStr }}）
        </div>
        <el-button
          plain
          style="width: 100%; height: 50px; font-size: 16px"
          type="danger"
          @click="goAddgroup()"
        >
          <el-icon>
            <Plus />
          </el-icon>
          新建参赛队
        </el-button>
      </div>
    </el-dialog>

    <groupDetail ref="dialogEditGroup" @submitForm="getMyGroupList" />
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
import { reactive, onMounted } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";
import variables from '@/assets/styles/variables.module.scss'
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
import * as match from "@/api/match/pc";
import { toRefs } from "@vueuse/shared";
import { ElMessage } from "element-plus";
import groupDetail from "../center/component/teamInfo_form";

const data = reactive({
  activeName: "tab1",
  matchData: {},
  activeName2: "first",
  projectList: [],
  groupList: [],
  levelList: [],
  levelListGirl: [],
  levelListBoy: [],
  popup: false,
  popupGroupList: false,
  groupListArr: [],
  matchId: 0,
  groups: [],
  time: 0,
  groupId: "",
  signDoneGroupList: [],
  cptLabelsList: [],
  secondTabName: "参赛队",
  collapseActive: "0",
});
const {
  activeName,
  activeName2,
  matchData,
  projectList,
  groupList,
  levelList,
  popup,
  popupGroupList,
  time,
  groupListArr,
  matchId,
  groups,
  groupId,
  signDoneGroupList,
  levelListGirl,
  levelListBoy,
  cptLabelsList,
  secondTabName,
  collapseActive,
} = toRefs(data);

onMounted(() => {
  matchId.value = route.params.id;
});

function getMyGroupList() {
  match.getMyGroupList().then((res) => {
    groups.value = res.data;
    popupGroupList.value = true;
  });
}

function getMatch(id) {
  match.getMatchById({ id: id }).then((res) => {
    matchData.value = res.data;
    if (
      matchData.value.disclaimerUrl &&
      matchData.value.disclaimerUrl.indexOf("https://") > -1
    ) {
      matchData.value.dUrl = JSON.parse(matchData.value.disclaimerUrl);
    }
    if (
      matchData.value.signKnowUrl &&
      matchData.value.signKnowUrl.indexOf("https://") > -1
    ) {
      matchData.value.sUrl = JSON.parse(matchData.value.signKnowUrl);
    }
    if (matchData.value.ruleUrl && matchData.value.ruleUrl.indexOf("https://") > -1) {
      matchData.value.rUrl = JSON.parse(matchData.value.ruleUrl);
    }

    time.value = res.data.secondRemain * 1000;
    if (matchData.value.signType == 1 || matchData.value.signType == 2) {
    } else {
      secondTabName.value = "参赛人员";
    }
    if (matchData.value.type == 1 && matchData.value.cpts) {
      secondTabName.value = "分站赛";
      activeName.value = "third";
    }
    if (res.data.cptLabels && cptLabelsList.value.length == 0) {
      cptLabelsList.value = res.data.cptLabels;
      for (const c of cptLabelsList.value) {
        if (c.fileUrl && c.fileUrl != "null") {
          var arr = JSON.parse(c.fileUrl);
          c.fileObj = arr[0];
          console.log(c.fileObj);
        }
      }
    }
  });
}

function getGroupListByCptId(id) {
  match.getGroupListByCptId(id).then((res) => {
    signDoneGroupList.value = res.data;
  });
}

function getThisGroupId(item) {
  groupId.value = item.id;
  checkIsSign(matchData.value.signType).then(() => {
    goSignType2();
  });
}

function handleClick(tab, event) {
  // console.log(tab, event)
}

// 获取已报信息
function checkIsSign(signType) {
  var obj = {
    cptId: matchId.value,
    groupId: groupId.value || "",
  };
  return match.getMySignInfo(obj).then((res) => {
    if (res.data.type == "1") {
      let str = "";
      if (signType == "0") {
        str = "已报名，不能重复报名";
      } else {
        str = "该参赛队已报名，请选择其他参赛队";
      }
      ElMessage.error(str);
      return Promise.reject("rejected message");
    }
  });
}

function choseSignType(item) {
  if (item.signType == "0") {
    // 个人报名
    checkIsSign(item.signType).then((res) => {
      router.push({
        path: `${route.params.id}/singleSign`,
      });
    });
  } else {
    // 团队报名 团体-队伍报名
    getMyGroupList();
  }
}

function goSignType2() {
  router.push({
    path: `${route.params.id}/teamSign`,
    query: {
      matchId: matchId.value,
      groupId: groupId.value,
      signType: matchData.value.signType,
    },
  });
}

function goAddgroup() {
  // 新团
  proxy.$refs["dialogEditGroup"].open({
    title: "新建参赛队",
  });
}

function goDetail(id) {
  const routeData = router.resolve({
    path: `${id}`,
  });
  window.open(routeData.href, "_blank");
}

function getLevelList(val) {
  levelList.value = [];
  levelListGirl.value = [];
  levelListBoy.value = [];
  if (val) {
    match.getLeveListByGroupId(val).then((res) => {
      for (const l of res.data) {
        if (l.levelType == "1") {
          levelListBoy.value.push(l);
        } else if (l.levelType == "2") {
          levelListGirl.value.push(l);
        } else {
          levelList.value.push(l);
        }
      }
    });
  }
}

getMatch(route.params.id);
getGroupListByCptId(router.currentRoute.value.params.id);
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.module.scss';
.mr15{
  margin-right:15px;
}
.app-container {
  padding: 0;
  background: #f5f7f9;
}

.countDownTitle {
  text-align: center;
  color: #525f6b;
  position: relative;
  width: 100%;
  left: 0;
  font-size: 14px;
}

.countDownTitle span {
  background: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

.countDownTitle::after {
  position: absolute;
  background: #ccc;
  height: 1px;
  content: "";
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  left: 0;
}

.typeTag {
  border-radius: 10px 10px 10px 0px;
  padding: 2px 12px;
  background: #ff8124;
  font-size: 14px;
  color: #fff;
}

.matchItem {
  cursor: pointer;
  margin-bottom: 40px;
  height: 180px;
  background: #ffffff;
  position: relative;
  border-radius: 10px;

  .el-avatar {
    position: absolute;
    left: 20px;
    top: 30px;

    img {
      background: #fff;
    }
  }

  .info {
    padding: 12px 0 0 140px;

    p {
      font-size: 14px;
    }
  }

  .typeTag {
    position: absolute;
    right: 0;
    top: 0;
  }

  h3 {
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    text-overflow: ellipsis;
  }

  &:hover h3 {
    font-weight: bold;
  }
}

.el-pagination {
  justify-content: center;
  --el-pagination-bg-color: none;
}

.kind {
  background: #fff;
  margin: 0 0 30px;

  ul {
    list-style: none;
    padding: 30px 0 10px;

    li {
      margin: 0 0 20px;
      display: flex;
      align-items: center;
    }
  }
}

.listTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match-tabs {
  background: #fff;
  padding: 10px 20px 20px;
}

  
.teamItem {
  height: 80px;
  background: #fbfcfd;
  border-radius: 10px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;

  .el-avatar {
    border: 1px solid #eeeeee;
  }

  .name {
    margin-left: 15px;
    flex: 1;
    font-size: 14px;
  }
}

.grid-top {
  background: #fff;
  min-height: 330px;
  padding: 28px;
  border-radius: 10px;
  margin: 30px auto;
  position: relative;

  .cover {
    width: 480px;
    height: 270px;
    aspect-ratio: 4/3;
    position: absolute;
    border-radius: 10px;
    background: #fff;
    object-fit: cover;
  }

  .info {
    padding-left: 500px;

    h3 {
      font-weight: 500;
      color: #000000;
      margin: 0 0 10px;
      font-size: 24px;
      display:flex;
      justify-content: flex-start;
      align-items: center;
      .typeTag {
        border-radius: 13px 13px 13px 0;
        margin-right: 10px;
      }
      .el-image{
          width:50px;
          height:50px;
          border-radius: 50%;
          margin-right: 10px;
          border:1px solid #ddd;
      }
    }

    p {
      color: #7b7f83;
      font-size: 16px;
    }

    .el-button.el-button--success {
      background: linear-gradient(270deg, #d44d4d, $--color-primary);
      border: none;
    }
  }
}

.gg {
  margin: 0 0 28px;

  h3 {
    margin: 20px 0 8px;
    font-weight: bold;
    font-size: 16px;
    position: relative;
    padding-left:20px;
  }
  h3::before {
        position: absolute; /*绝对定位*/
        top: 50%; /*Y轴方向偏移自身高度的50%*/
        transform: translatey(-40%); /*Y轴方向偏移微调*/
        left:0; /*紧靠容器左边缘*/
        content: ''; /*伪元素需要有内容才能显示*/
        width: 3px; /*伪元素宽度*/
        height: 17px; /*伪元素高度*/
        background-color: $--color-primary; /*伪元素颜色*/

     }
  p {
    font-size: 16px;
    color: #4c5359;
    margin: 0 0 8px;
    line-height: 24px;
  }

  .pp {
    margin:20px;
    padding:20px;
    border:1px solid $--color-primary;
  }
}

.van-count-down {
  text-align: center;
  margin: 20px 0;
}

.colon {
  display: inline-block;
  font-size: 16px;
  margin: 0 8px;
  color: #7b7f83;
}

.block {
  display: inline-block;
  width: 58px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  border-radius: 10px;
  background: url(/src/assets/img/djs_bg.png) left;
  background-size: 100% 100%;
  line-height: 60px;
  text-align: center;
}

.time-address {
  font-size: 15px;
  margin: 10px 0 0;
  color: #999;
}

.popList .teamItem {
  cursor: pointer;
}

.popList .teamItem:hover {
  background: #e7e7e7;
}

.richContent {
  overflow: hidden;
}

.richContent img {
  max-width: 100%;
}

.red-center {
  font-size: 24px;
  text-align: center;
  font-family: DIN Alternate;
  padding: 30px 0;
  font-weight: bold;
  color: $--color-primary;
}

.plist {
  dt {
    font-size: 14px;
  }

  dd {
    display: inline-block;
    margin: 0 15px 0 0;
  }

  dd.t {
    display: block;
    margin: 15px 0 6px;
    border-left: 3px solid $--color-primary;
    line-height: 1;
    padding: 6px;
    background: #f5f5f5;
  }

  li {
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    cursor: pointer;
  }

  li:hover {
    background: #eee;
  }
}

.pp .el-link {
  margin-right: 15px;
  font-size: 16px;
}

:deep(.el-collapse-item__header) {
  font-weight: 500;
  font-size: 16px;
}

.pobtns {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
}

.signButton {
  margin: 70px 0 20px;

  button {
    width: 100%;
    font-size: 20px;
    height: 50px;
  }
}

.el-timeline-item__timestamp.is-top {
  font-size: 16px;
}

.el-timeline-item__content {
  font-size: 16px;
  margin: 10px 0 0;
}

.typeTag.blue {
  background: #00a0e9;
}

.typeTag.green {
  background: $--color-primary;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

.table {
  width: 100%;
  // border-left: 1px solid #e1e1e1;
  // border-top: 1px solid #e1e1e1;
  th {
    background: $--color-primary;
    padding: 6px 10px;
    // border-right: 1px solid #e1e1e1;
     border-bottom: 10px solid #fff;
    font-size: 15px;
    color:#fff;
  
  }
  td {
    padding: 6px 10px;
    // border-right: 1px solid #e1e1e1;
    font-size: 15px;
    // border-bottom: 1px solid #e1e1e1;
    vertical-align: middle;
    text-align: center;
    span {
      margin-right: 10px;
    }
    span::after {
      content: ",";
    }
    span:last-child::after {
      content: "";
    }
  }
}
.flexLine {
  display: flex;
  label {
    font-weight: normal;
  }
}

.nowteamItem {
  height: 100px;
  background: #fbfcfd;
  border-radius: 10px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  .el-avatar {
    margin: 0 20px;
  }
  .info {
    h3 {
      margin: 0 0 15px;
    }
    p {
      margin: 0;
      color: $--color-primary;
    }
  }
  .rr {
    text-align: right;
    flex: 1;
    span {
      color: $--color-primary;
    }
  }
}
.marginBottom{
  margin-bottom:10px!important;
}
.marginTop{
  margin-top:10px!important;
}
.duckTitle{
  width:100%;
  background:$--color-primary;
  color:#fff!important;
  border-radius: 2px;
  text-align:center;
  padding:15px;
}
.duckBox p{
  margin:0;
}
.duckGroup{
  border:2px solid $--color-primary;
  border-top:none;
}
.duckGroup-list{
  display:flex;
  padding:10px 15px;
  border-bottom:1px solid #f6f6f6e5;
  justify-content: flex-start;
  align-items: center;

  .duckGroup-list-title{
    display: inline-block;
    margin-right:20px;
    padding:0 20px;
    border-right:3px solid #ddd;
  }
}

</style>
